<template>
  <div class="header">
    <div class="header-left iconfont icon-fanhui"></div>
    <div class="header-input">
      <span class="iconsize icon icon-sousuo"></span>
      输入景点、城市、游玩主题
    </div>
    <router-link to="/city">
      <div class="header-right">
        {{this.city}}
        <span class="iconsize icon icon-arrfill_u-copy"></span>
      </div>
    </router-link>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: "Home_header",
  computed: {
    ...mapState(['city'])
  }
};
</script>
<style lang="stylus" scoped >
// @import '~@/assets/styles/varibles.styl'
@import '~style/varibles.styl'

.header
  display flex
  line-height $headerHight
  // height 0.44rem
  background $bgColor

  .header-left
    width 0.64rem
    text-align center
    font-size 0.32rem

  .header-input
    flex 1
    margin 0.12rem 0.2rem
    padding-left 0.2rem
    height 0.64rem
    background-color #fff
    border-radius 0.1rem
    color #cccccc
    line-height 0.64rem
    text-align left

    span
      font-size 0.32rem
      text-align center

    .iconsize
      text-align center
      font-size 0.32rem

  .header-right
    min-width 1.24rem
    color #fff

    .iconsize
      text-align center
      font-size 0.32rem
</style>